import { PureComponent } from 'react';
import { exportFile } from 'table-xlsx';

import './index.less';
import { TableC, PrimaryC, SecondHeaderC } from '@/src/components';

export default class SettingCellStyle extends PureComponent {
  getColumn = () => {
    const columns = [
      {
        title: 'Name',
        className: 'headerName',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        txHeaderCellStyle: { fillFgColorRgb: 'FF8040' },
        onTxBodyCell: () => ({
          style: { fillFgColorRgb: 'EEEEE0' },
        }),
        onCell: () => {
          const cellProps = {};
          cellProps.style = {
            background: '#EEEEE0',
          };
          return cellProps;
        },
      },
      {
        title: 'Other',
        txHeaderCellStyle: {
          fillFgColorRgb: 'EEEEE0', // 填充表头颜色
          fontColorRgb: 'FF8040',
        },
        children: [
          {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            width: 100,
            txHeaderCellStyle: { fillFgColorRgb: 'FF8040' },
          },
          {
            title: 'Address',
            txHeaderCellStyle: { fontColorRgb: 'FF8040' },
            children: [
              {
                title: 'Street',
                dataIndex: 'street',
                key: 'street',
                width: 100,
                txHeaderCellStyle: { fillFgColorRgb: 'FF8040' },
                onTxBodyCell: (record, index) => {
                  let style;
                  if (index === 2) {
                    style = { fontColorRgb: 'FF0000', fontBold: true }; // 字体色 加粗
                  }
                  return { style };
                },
                render: (text, record, rowIndex) => <span style={rowIndex === 2 ? { color: 'red', fontWeight: 'bold' } : {}}>{text}</span>,
              },
              {
                title: 'Block',
                txHeaderCellStyle: { fontColorRgb: 'FF8040' },
                children: [
                  {
                    title: 'Building',
                    dataIndex: 'building',
                    key: 'building',
                    width: 100,
                    txHeaderCellStyle: { fillFgColorRgb: 'FF8040' },
                    onTxBodyCell: (record, index) => {
                      let style;
                      if (index === 1 || index === 2) {
                        style = { fontColorRgb: 'FF0000', fontBold: true }; // 字体色 加粗
                      }
                      return { style };
                    },
                    render: (text, record, rowIndex) => <span style={[1, 2].includes(rowIndex) ? { color: 'red', fontWeight: 'bold' } : {}}>{text}</span>,
                  },
                  {
                    title: 'Door No.',
                    dataIndex: 'number',
                    key: 'number',
                    width: 100,
                    txHeaderCellStyle: {
                      borderColorRgb: 'FF0000',
                      fontColorRgb: 'FF8040',
                    },
                    onTxBodyCell: () => ({
                      style: { fontColorRgb: 'FF0000', fontBold: true }, // 字体色 加粗
                    }),
                    render: (text) => <span style={{ color: 'red', fontWeight: 'bold' }}>{text}</span>,
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
    return columns;
  };

  getData = () => {
    const dataSource = [];
    for (let i = 0; i < 3; i++) {
      dataSource.push({
        key: i,
        name: 'John Brown',
        age: i + 1,
        street: 'Lake Park',
        building: 'C',
        number: 2035,
        companyAddress: 'Lake Street 42',
        companyName: 'SoftLake Co',
        gender: 'M',
      });
    }

    return dataSource;
  };

  onExportFileClick = () => {
    exportFile({
      fileName: '设置单元格样式导出.xlsx', // 文件名
      columns: this.getColumn(), // 表格columns
      dataSource: this.getData(), // 表格dataSource
      bodyCellStyle: {
        // 单元格样式
        alignmentHorizontal: 'center', // 水平对齐
      },
    });
  };

  render() {
    return (
      <div className='SettingCellStyle'>
        <SecondHeaderC title='设置单元格样式导出' />
        <PrimaryC title='导出' onClick={() => this.onExportFileClick()} />
        <div>
          <TableC dataSource={this.getData()} columns={this.getColumn()} bordered size='small' hidePage />
        </div>
      </div>
    );
  }
}
